<template>
  <div class="content">
    <navBar :navBar="navBar"></navBar>
    <div class="emptyBox"></div>
    <div class="con">
      <div class="topbox">
        <div class="imgkuang">
          <!-- <img src="../../assets/images/zichan/erweima.jpg" alt="" /> -->
          <div class="img" id="qr" ref="qrCodeDiv"></div>
        </div>
        <div class="btns">
          <div class="look" @click="lookimg">{{$t('查看二维码')}}</div>
          <div class="baocun" @click="savePic">{{$t('保存二维码')}}</div>
        </div>
      </div>
      <div class="copy">
        <div class="dizhi">
          <!-- https://www.starkw.vip/login/reg.html?t=1&c=409753 -->
          {{  yaourl + code }}
        </div>
        <div class="copybtn" @click="copy(1)">{{$t('复制')}}</div>
      </div>
      <div class="copy">
        <div class="dizhi">{{$t('您的邀请码')}}</div>
        <div class="copybtn">
          <span>{{ code }}</span>
        </div>
        <div class="copybtn" @click="copy(code)">{{$t('复制')}}</div>
      </div>
      <div class="tips">
        <p>1：{{$t('通过以上二维码或者链接进行注册。')}}</p>
        <p>2：{{$t('新人注册时，填写您的邀请码。')}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import navBar from "@/components/navBar.vue";
import { ImagePreview } from "vant";
export default {
  name: "recharge",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("我要分享"),
        close: false,
        btn: "",
        isBlue: true,
      },

      code: "",
      qr: "",
	  yaourl:"https://www.hantec.top/#/register?sno="
    };
  },

  mounted() {
    this.getuserinfo();
  },
  beforeUpdate() {
    this.qr = new QRCode(this.$refs.qrCodeDiv, {
      text: this.code,
      width: 90,
      height: 90,
      colorDark: "#333333", //二维码颜色
      colorLight: "#ffffff", //二维码背景色
      correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
    });
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    getuserinfo() {
      $postAxios(api.getUserInfo, {}, (res) => {
        this.code = res.data.sno;
      });
    },
    //复制内容
    copy(code) {
      var that = this;
      if (code == 1) {
        var url = this.yaourl + this.code;
        this.$copyText(url.toString()).then(
          function (e) {
            that.$toast("Success");
          },
          function (e) {
            that.$toast("Error");
          }
        );
      } else {
        this.$copyText(this.code.toString()).then(
          function (e) {
            that.$toast("Success");
          },
          function (e) {
            that.$toast("Error");
          }
        );
      }
    },
    //保存二维码
    savePic() {
      let myCanvas = document
        .getElementById("qr")
        .getElementsByTagName("canvas");

      let a = document.createElement("a");
      a.href = myCanvas[0].toDataURL("image/png");
      a.download =  this.$t("邀请二维码");
      a.click();
      that.$toast("Success");
    },
    //查看二维码
    lookimg() {
      let myCanvas = document
        .getElementById("qr")
        .getElementsByTagName("canvas");

      let a = document.createElement("a");
      a.href = myCanvas[0].toDataURL("image/png");
      ImagePreview([a.href]);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background-color: rgba(247, 246, 251, 1);
  .emptyBox {
    width: 100%;
    height: 40px;
  }
  .con {
    width: 100%;
    padding: 20px 20px 0;
    box-sizing: border-box;
    .topbox {
      width: 100%;
      box-shadow: 0px 2px 5px 0px rgb(3 3 3 / 5%);
      border-radius: 15px;
      padding: 7px 14px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      .imgkuang {
        width: 90px;
        height: 90px;
        padding: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .btns {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .look {
          padding: 5px 25px;
          background-color: #3489f8;
          border-radius: 2px;
          font-size: 12px;
          color: #ffffff;
        }
        .baocun {
          padding: 5px 25px;
          background-color: #ffffff;
          border-radius: 2px;
          font-size: 12px;
          color: #333333;
          border: 1px solid rgba(0, 0, 0, 0.1);
          margin-top: 15px;
        }
      }
    }
    .copy {
      width: 100%;
      background-color: #ffffff;
      box-shadow: 0px 2px 5px 0px rgb(3 3 3 / 5%);
      -webkit-border-radius: 15px;
      border-radius: 15px;
      margin-top: 13px;
      .dizhi {
        padding: 18px 0 12px;
        border-bottom: 0.5px solid #f1f4f5;
        font-weight: 600;
        font-size: 12px;
        color: #333333;
        text-align: center;
      }
      .copybtn {
        padding: 12px 0;
        font-size: 14px;
        color: #588bf8;
        text-align: center;
        span {
          font-size: 20px;
          font-weight: 600;
          color: #2979ff;
        }
      }
    }
    .tips {
      padding-top: 20px;
      p {
        font-size: 12px;
        color: #333333;
      }
    }
  }
}
</style>
